<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>制作相册</title>
  <link rel="stylesheet" href="./src/css/main-albummake.css">
  
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/vue-router@4"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  
  <script>
    axios.defaults.baseURL = "https://<YOUAPPID>.lafyun.com";
  </script>
</head>
<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <script>
    //工具函数
    function debounce(delay, func) {
      let timer;
      return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
          func.apply(context, args);
        }, delay)
      } 
    }
  </script>
  <script src="./components/albumMake-Main.js"></script>
  <script src="./components/albumMake-Template.js"></script>
  <script src="./components/albumMake-Music.js"></script>
  <script src="./components/albumMake-Photo.js"></script>
  <script src="./components/albumMake-Write.js"></script>
  
  <script>
    var phoneScale = parseInt(window.screen.width)/500;
    document.write('<meta name="viewport" content="width=500, min-height=750, initial-scale=' + phoneScale +', maximum-scale='+phoneScale+', user-scalable=0" /> '); 
    //路由
    const routes = [
      { path: '/:albumId/', name: "main", component: Main },
      { path: '/:albumId/template/', name: "template", component: Template },
      { path: '/:albumId/music/', name: "music", component: Music },
      { path: '/:albumId/photo/', name: "photo", component: Photo },
      { path: '/:albumId/write/', name: "write", component: Write },
    ]
    //创建 router
    const router = VueRouter.createRouter({
      history: VueRouter.createWebHashHistory(),
      routes,
    })
    //创建VueApp 挂载路径
    const app = Vue.createApp({})
    app.use(router)
    app.mount('#app')
  </script>
</body>
</html>